<!DOCTYPE html>
<html>
<head>
<style> 
.one
{
width:100px;
height:100px;
background:red;
position:relative ;
animation:mymove 12s ;
animation-delay:-4s;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
.two
{
width:100px;
height:100px;
background:red;
position:relative;
animation:zby infinite;
animation-duration:10s;
}
@keyframes zby
{
from {top:10px;}
to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。</p>

<div class="one"></div><br>
<div class="two">
	
</div>

</body>
</html>